<template>
  <el-dialog
    :title="dialogObj.title"
    append-to-body
    :visible.sync="dialogObj.show"
    :close-on-click-modal="false"
    width="700px"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="120px"
      :rules="rules"
      :disabled="dialogObj.read"
      v-if="dialogObj.show"
      status-icon
    >
      <el-form-item label="模板名：" prop="name">
        <el-input
          v-model="form.name"
          style="width:200px;"
          size="mini"
          maxlength="100"
        ></el-input>
      </el-form-item>
      <el-form-item label="缩写：" prop="sn">
        <el-input
          v-model="form.sn"
          style="width:200px;"
          size="mini"
          maxlength="100"
        ></el-input>
      </el-form-item>
      <el-form-item label="编码：" prop="code">
        <el-input
          v-model="form.code"
          style="width:200px;"
          size="mini"
          maxlength="100"
        ></el-input>
      </el-form-item>
      <el-form-item label="文件分类：" prop="category">
        <el-input
          v-model="form.category"
          style="width:200px;"
          size="mini"
          maxlength="100"
        ></el-input>
      </el-form-item>
        <el-form-item label="合同模板：" prop="path">
            <upload-file
              :imageValue="form.path"
              @handlefileSuccess="handlefileSuccess"
            >
            </upload-file>
          </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="sub" size="mini">确 定</el-button>
      <el-button @click="dialogObj.show = false" size="mini">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { _debounce } from "@u/debounce";
import uploadFile from "./uploadFile";
import { AddTemplateApi, updateTemplateApi } from "@s/api";
export default {
  name: "dialogCom",
  props: ["dialogObj"],
  data() {
    return {
      agentStatus: true,
      form: {
        id: "",
        name: "",
        sn: "",
        code: "",
        category: "",
        path: "",
        size: "",
        type: ""
      },
      rules: {
        name: [{ required: true, trigger: "blur", message: "请输入模板名" }],
        category: [{ required: true, trigger: "blur", message: "请输入文件分类" }]
      }
    };
  },
  components: {
      uploadFile
  },
  methods: {
    initDialog() {
      if (this.dialogObj.id) {
        this.form.id = this.dialogObj.id;
        this.form.code = this.dialogObj.form.code;
        this.form.name = this.dialogObj.form.name;
        this.form.sn = this.dialogObj.form.sn;
        this.form.category = this.dialogObj.form.category;
        this.form.path = this.dialogObj.form.path;
        this.form.size = this.dialogObj.form.size;
        this.form.type = this.dialogObj.form.type;
      } else {
        this.form.id = "";
        this.form.name = "";
        this.form.sn = "";
        this.form.code = "";
        this.form.category = "";
        this.form.path = "";
        this.form.size = "";
        this.form.type = "";
      }
    },
    sub: _debounce(function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.dialogObj.id) {
            this.updateSub();
          } else {
            this.addSub();
          }
        }
      });
    }),
    updateSub() {
      let json = JSON.parse(JSON.stringify(this.form));
      updateTemplateApi(json).then(() => {
        this.dialogObj.show = false;
        this.$emit("reflash");
        this.$message({
          type: "success",
          message: "修改成功！"
        });
      });
    },
    addSub() {
      let json = JSON.parse(JSON.stringify(this.form));
      AddTemplateApi(json).then(() => {
        this.dialogObj.show = false;
        this.$emit("reflash");
        this.$message({
          type: "success",
          message: "添加成功！"
        });
      });
    },
    handlefileSuccess(filePath, file) {
      let fileName = file.name.lastIndexOf("."); //取到文件名开始到最后一个点的长度
      let fileNameLength = file.name.length; //取到文件名长度
      let fileFormat = file.name.substring(fileName + 1, fileNameLength); //截
      this.form.size = file.size;
      this.form.type = fileFormat;
      this.form.path = filePath;
    }
  },
  watch: {
    "dialogObj.show"(val) {
      if (val) {
        this.initDialog();
      }
    }
  }
};
</script>
<style scoped lang="scss"></style>
